<script setup>
import * as Cesium from 'cesium'
import {onMounted,ref,reactive,useTemplateRef} from "vue";
import initMap from "@/utils/initMap.js";
import logo from '@/assets/vue.svg'
// import Cesium_Air from "@/assets/Cesium_Air.glb?url"
// import CubeModel from '@/assets/AnimatedMorphCube.gltf?url'
// import BoxModel from "@/assets/Box.gltf?url"
import PointPrimitiveManage from "@/utils/primitiveCollectionManage/PointPrimitiveManage.js";
import LabelPrimitiveManage from "@/utils/primitiveCollectionManage/LabelPrimitiveManage.js";
import BillboardPrimitiveManage from "@/utils/primitiveCollectionManage/BillboardPrimitiveManage.js";

import {useSetting} from "@/store/setting";
import { ElMessage } from 'element-plus'




Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkZjg4ZjljZC1mZGM3LTRlZjEtYjg3MC00MjZkNGU3YjI5ZWUiLCJpZCI6MTU5NTIsImlhdCI6MTYwNTE0ODM5OX0.LjxeKrgAo7Ksk8405kSAhYwF0nKcF2w2DGJnKHh51N8';
const pointCollection = new PointPrimitiveManage();
const billboardCollection = new BillboardPrimitiveManage()
const labelCollection = new  LabelPrimitiveManage()

const setting = useSetting()
let numPoints = setting.primitiveCount;
function moveAmountRandom(){
    const min = setting.moveRandomMin;
    const max = setting.moveRandomMax;
    const x = Cesium.Math.randomBetween(min,max);
    const y = Cesium.Math.randomBetween(min,max);
    const z = Cesium.Math.randomBetween(min,max);
    return new Cesium.Cartesian3(x,y,z);
}
let mountedViewer = null
const cesium_container = useTemplateRef('cesium_container')

onMounted(() => {
    const viewer = initMap(cesium_container.value);
    mountedViewer = viewer
    const {scene} = viewer;
    scene.primitives.add(pointCollection);
    scene.primitives.add(billboardCollection);
    scene.primitives.add(labelCollection);
    genPrimitive(scene)

    new Cesium.ScreenSpaceEventHandler(scene.canvas).setInputAction(function(event){
        // const pick = viewer.camera.pickEllipsoid(e.position);
        // console.log(pick)
        const {position} = event;
        const pick = viewer.scene.pick(position)
        console.log(pick)
    },Cesium.ScreenSpaceEventType.LEFT_CLICK);
})

function genPrimitive(scene){
    scene.preUpdate.removeEventListener(animatePoints)
    numPoints = setting.primitiveCount;
    for(let i = 0; i < numPoints; i++) {

        const base = scene.globe.ellipsoid.radii.x;
        const position = new Cesium.Cartesian3(
          16000000 * Math.random() - 8000000,
          -((4000000 * i) / numPoints + base),
          2000000 * Math.random() - 1000000
        );

        if(setting.isShowPoint){
            pointCollection.add({
                position: position,
                pixelSize:5,
                color:Cesium.Color.RED,
                id:i+1,
            })
        }


        if(setting.isShowLabel){
            labelCollection.add({
                position:position,
                text:String(i+1),
                font:'8px',
                fillColor: Cesium.Color.SKYBLUE,
                outlineColor: Cesium.Color.BLACK,
                outlineWidth: 2,
                style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                horizontalOrigin:Cesium.HorizontalOrigin.CENTER,
                verticalOrigin:Cesium.VerticalOrigin.BOTTOM,
                pixelOffset:new Cesium.Cartesian2(0,12),
                id:i+1,
            })
        }

        if(setting.isShowBillboard){
            billboardCollection.add({
                image:logo,
                scale:0.5,
                position:position,
                id:i+1
            })
        }




    }

    scene.preUpdate.addEventListener(animatePoints)

}
const positionScratch = new Cesium.Cartesian3();
function animatePoints(){

    for (let i = 1; i < numPoints; i+=Number(setting.updateIntervalCount)) {
        const point = pointCollection.getById(i)
        const label = labelCollection.getById(i)
        const bill = billboardCollection.getById(i)

        let basePosition = Cesium.Cartesian3.ZERO;
        if(point) {
            basePosition = point.position
        }else if(label){
            basePosition = label.position
        }else if(bill){
            basePosition = bill.position
        }


        Cesium.Cartesian3.clone(basePosition, positionScratch);
        Cesium.Cartesian3.add(positionScratch, moveAmountRandom(), positionScratch);

        if(point)point.position = positionScratch;
        if(label)label.position = positionScratch;
        if(bill)bill.position = positionScratch;
    }

}


const drawer = ref(false)
const form = reactive({
    primitiveCount:0,
    isShowPoint:true,
    isShowLabel:true,
    isShowBillboard:true,
    updateIntervalCount:1,
    moveRandomMin:0,
    moveRandomMax:100,
    isShowFxaa:true,
})
function handleOpenSetting(){
    form.primitiveCount = setting.primitiveCount;
    form.isShowPoint = setting.isShowPoint;
    form.isShowLabel = setting.isShowLabel;
    form.isShowBillboard = setting.isShowBillboard;
    form.updateIntervalCount = setting.updateIntervalCount;
    form.moveRandomMax = setting.moveRandomMax
    form.moveRandomMin = setting.moveRandomMin;
    form.isShowFxaa = setting.isShowFxaa
    drawer.value = true
}


function handleUpdateSetting(){
    setting.updatePrimitiveCount(form.primitiveCount)
    setting.updateIsShowPoint(form.isShowPoint)
    setting.updateIsShowLable(form.isShowLabel)
    setting.updateIsShowBillboard(form.isShowBillboard)
    setting.changeUpdateIntervalCount(form.updateIntervalCount)
    setting.updateMoveRandomMax(form.moveRandomMax)
    setting.updateMoveRandomMin(form.moveRandomMin)
    setting.updateIsShowFxaa(form.isShowFxaa)

    pointCollection.removeAll()
    labelCollection.removeAll()
    billboardCollection.removeAll()
    genPrimitive(mountedViewer.scene)
    mountedViewer.scene.postProcessStages.fxaa.enabled = setting.isShowFxaa;

    ElMessage({
        message: '更新成功',
        type: 'success',
        plain: true,
    })
    drawer.value =false


}



</script>

<template>

    <div class="setting_box">
        <el-button type="primary" size="small" @click="handleOpenSetting"><el-icon><Setting /></el-icon></el-button>
    </div>

    <el-drawer
      v-model="drawer"
      title="设置"
    >
        <el-form :model="form" label-width="auto" style="max-width: 600px" @submit.prevent="handleUpdateSetting">
            <el-form-item label="抗锯齿：">
                <el-switch v-model="form.isShowFxaa" />
            </el-form-item>
            <el-form-item label="Primitive数量：">
                <el-input-number :min="0" v-model="form.primitiveCount" />
            </el-form-item>
            <el-form-item label="显示point：">
                <el-switch v-model="form.isShowPoint" />
            </el-form-item>
            <el-form-item label="显示label：">
                <el-switch v-model="form.isShowLabel" />
            </el-form-item>
            <el-form-item label="显示billboard：">
                <el-switch v-model="form.isShowBillboard" />
            </el-form-item>

            <el-form-item label="间隔更新频率：">
                <el-input-number :min="1" :max="form.primitiveCount" v-model="form.updateIntervalCount" />
            </el-form-item>


            <el-form-item>
                <el-button type="primary" native-type="submit">更新</el-button>
                <el-button @click="drawer = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-drawer>

    <div class="cesium_container" ref="cesium_container"></div>

</template>

<style scoped lang="scss">

.setting_box{
    position: fixed;
    left: 30px;
    top: 30px;
    z-index: 9;
}
</style>
